import { Button, Checkbox, message, Modal, Table } from 'antd';
import { connect } from 'dva';
import React, { PureComponent } from 'react';
import styles from './index.less';

@connect((state) => ({}))
export default class SyncFieldModal extends PureComponent {
  state = {
    tableLoading: false,
    tableData: [],
    tableChangeData: [],
    submitBtnLoading: false,
  };

  componentDidMount() {
    this.handleTableData();
    // const tableData = [
    //   {
    //     sid: 1,
    //     checkStatus: 1,
    //     name: "vin",
    //     groupName: "分组1",
    //     creditList: [
    //       { scene: "list", status: 1 },
    //       { scene: "add", status: 0 },
    //       { scene: "detail", status: 0 },
    //       // { scene: "map", status: 1 },
    //       // { scene: "more", status: 1 },
    //     ],
    //     warningList: [
    //       { scene: "list", status: 1 },
    //       { scene: "detail", status: 0 },
    //       { scene: "map", status: 1 },
    //       { scene: "more", status: 1 },
    //     ],
    //     overdueList: [
    //       { scene: "list", status: 1 },
    //       { scene: "detail", status: 0 },
    //       { scene: "map", status: 1 },
    //       { scene: "more", status: 1 },
    //     ],
    //     mileageList: [
    //       { scene: "list", status: 1 },
    //       { scene: "more", status: 0 },
    //     ],
    //   },
    //   {
    //     sid: 2,
    //     checkStatus: 0,
    //     name: "vin2",
    //     groupName: "分组2",
    //     creditList: [
    //       { scene: "list", status: 0 },
    //       { scene: "add", status: 0 },
    //       { scene: "detail", status: 0 },
    //       { scene: "map", status: 0 },
    //       { scene: "more", status: 0 },
    //     ],
    //     warningList: [
    //       { scene: "list", status: 0 },
    //       { scene: "detail", status: 0 },
    //       { scene: "map", status: 0 },
    //       { scene: "more", status: 0 },
    //     ],
    //     overdueList: [
    //       { scene: "list", status: 0 },
    //       { scene: "detail", status: 0 },
    //       { scene: "map", status: 0 },
    //       { scene: "more", status: 0 },
    //     ],
    //     mileageList: [
    //       { scene: "list", status: 0 },
    //       { scene: "more", status: 0 },
    //     ],
    //   },
    // ];

    // let newTableChangeData = [];
    // tableData.map((item) => {
    //   const newRecord = {
    //     fieldId: item.sid,
    //     checkStatus: item.checkStatus,
    //     creditList: [],
    //     warningList: [],
    //     overdueList: [],
    //     mileageList: [],
    //   };
    //   newTableChangeData.push(newRecord);
    // });
    // this.setState({
    //   tableData,
    //   tableChangeData: newTableChangeData,
    // });
  }

  handleTableData = () => {
    const { merchantId } = this.props;
    this.setState({
      tableLoading: true,
    });
    this.props.dispatch({
      type: 'merchant/getDataWithRes',
      payload: {
        url: '/mscreditbusiness/merchants/field/sync/list',
        merchantId: merchantId,
      },
      callback: (response) => {
        if (response && response.statusCode == '0') {
          const tableData = response.data;
          let newTableChangeData = [];
          tableData.map((item) => {
            const newRecord = {
              fieldUuid: item.uuid,
              checkStatus: item.checkStatus,
              creditList: [],
              warningList: [],
              overdueList: [],
              mileageList: [],
              riskcontrolvehicleList: [],
            };
            newTableChangeData.push(newRecord);
          });
          this.setState({
            tableData,
            tableChangeData: newTableChangeData,
          });
          // } else {
          //   message.error(response.statusMessage);
        }
        this.setState({
          tableLoading: false,
        });
      },
    });
  };

  handleSubmit = () => {
    const { changeSyncFieldModalVisible, merchantId } = this.props;
    const { tableChangeData, tableData } = this.state;
    let fieldList = tableChangeData.filter((item, index) => {
      const checkStatus = tableData[index].checkStatus === 1;
      const length =
        item.creditList.length +
        item.warningList.length +
        item.overdueList.length +
        item.mileageList.length +
        item.riskcontrolvehicleList.length;
      if (item.checkStatus && !checkStatus) {
        return true;
      } else {
        return length > 0;
      }
    });
    let submitData = {
      merchantUuid: merchantId,
      fieldList,
    };
    console.log('submitData', submitData);
    if (fieldList.length === 0) {
      message.error('请勾选场景');
      return;
    }
    this.setState({
      submitBtnLoading: true,
    });
    this.props.dispatch({
      type: 'merchant/postObj',
      payload: {
        url: '/mscreditbusiness/merchants/field/sync',
        ...submitData,
      },
      callback: (response) => {
        if (response && response.statusCode == '0') {
          message.success('操作成功');
          changeSyncFieldModalVisible(true);
          // } else {
          //   message.error(response.statusMessage);
        }
        this.setState({
          submitBtnLoading: false,
        });
      },
    });
  };

  handleChangeCheck = (listType, checkValue, sceneType, index) => {
    const { tableChangeData } = this.state;
    let newTableChangeData = JSON.parse(JSON.stringify(tableChangeData));
    if (checkValue) {
      newTableChangeData[index][listType].push(sceneType);
    } else {
      newTableChangeData[index][listType] = newTableChangeData[index][listType].filter(
        (item) => item !== sceneType,
      );
    }
    this.setState({ tableChangeData: newTableChangeData });
  };

  render() {
    const { submitBtnLoading, tableData, tableLoading, tableChangeData } = this.state;
    const { changeSyncFieldModalVisible } = this.props;
    const columns = [
      {
        title: '',
        width: '50px',
        dataIndex: 'checkStatus',
        align: 'center',
        render: (text, record, index) => {
          const changeRecord = tableChangeData[index];
          return (
            <Checkbox
              disabled={text === 1}
              checked={changeRecord.checkStatus}
              onChange={(item) => {
                let newTableChangeData = JSON.parse(JSON.stringify(tableChangeData));
                if (item.target.checked) {
                  newTableChangeData[index].checkStatus = 1;
                } else {
                  newTableChangeData[index].checkStatus = 0;
                  newTableChangeData[index].creditList = [];
                  newTableChangeData[index].warningList = [];
                  newTableChangeData[index].overdueList = [];
                  newTableChangeData[index].mileageList = [];
                  newTableChangeData[index].riskcontrolvehicleList = [];
                }
                this.setState({ tableChangeData: newTableChangeData });
              }}
            ></Checkbox>
          );
        },
      },
      {
        title: '字段名称',
        dataIndex: 'name',
      },
      {
        title: '所属分组',
        dataIndex: 'groupName',
      },
      {
        title: '授信车辆',
        width: '110px',
        dataIndex: 'creditList',
        render: (text, record, index) => {
          const result = [];
          const checkStatus = tableChangeData[index].checkStatus === 0;
          const add = text.find((item) => item.scene === 'add');
          if (add) {
            const addNew = tableChangeData[index].creditList.indexOf('add') >= 0;
            result.push(
              <div key="add">
                <Checkbox
                  checked={add.status == 1 ? true : addNew}
                  // disabled={add.status == 1 ? true : checkStatus}
                  disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('creditList', e.target.checked, 'add', index);
                  }}
                >
                  新增
                </Checkbox>
              </div>,
            );
          }
          const list = text.find((item) => item.scene === 'list');
          if (list) {
            const listNew = tableChangeData[index].creditList.indexOf('list') >= 0;
            result.push(
              <div key="list">
                <Checkbox
                  checked={list.status == 1 ? true : listNew}
                  disabled={list.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('creditList', e.target.checked, 'list', index);
                  }}
                >
                  列表
                </Checkbox>
              </div>,
            );
          }
          const detail = text.find((item) => item.scene === 'detail');
          if (detail) {
            const detailNew = tableChangeData[index].creditList.indexOf('detail') >= 0;
            result.push(
              <div key="detail">
                <Checkbox
                  checked={detail.status == 1 ? true : detailNew}
                  disabled={detail.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('creditList', e.target.checked, 'detail', index);
                  }}
                >
                  详情
                </Checkbox>
              </div>,
            );
          }
          const map = text.find((item) => item.scene === 'map');
          if (map) {
            const mapNew = tableChangeData[index].creditList.indexOf('map') >= 0;
            result.push(
              <div key="map">
                <Checkbox
                  checked={map.status == 1 ? true : mapNew}
                  disabled={map.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('creditList', e.target.checked, 'map', index);
                  }}
                >
                  地图
                </Checkbox>
              </div>,
            );
          }
          const more = text.find((item) => item.scene === 'more');
          if (more) {
            const moreNew = tableChangeData[index].creditList.indexOf('more') >= 0;
            result.push(
              <div key="more">
                <Checkbox
                  checked={more.status == 1 ? true : moreNew}
                  disabled={more.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('creditList', e.target.checked, 'more', index);
                  }}
                >
                  更多筛选
                </Checkbox>
              </div>,
            );
          }
          return result.map((item) => {
            return item;
          });
        },
      },
      {
        title: '预警车辆',
        width: '110px',
        dataIndex: 'warningList',
        render: (text, record, index) => {
          const result = [];
          const checkStatus = tableChangeData[index].checkStatus === 0;
          const list = text.find((item) => item.scene === 'list');
          if (list) {
            const listNew = tableChangeData[index].warningList.indexOf('list') >= 0;
            result.push(
              <div key="list">
                <Checkbox
                  checked={list.status == 1 ? true : listNew}
                  disabled={list.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('warningList', e.target.checked, 'list', index);
                  }}
                >
                  列表
                </Checkbox>
              </div>,
            );
          }
          const detail = text.find((item) => item.scene === 'detail');
          if (detail) {
            const detailNew = tableChangeData[index].warningList.indexOf('detail') >= 0;
            result.push(
              <div key="detail">
                <Checkbox
                  checked={detail.status == 1 ? true : detailNew}
                  disabled={detail.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('warningList', e.target.checked, 'detail', index);
                  }}
                >
                  详情
                </Checkbox>
              </div>,
            );
          }
          const map = text.find((item) => item.scene === 'map');
          if (map) {
            const mapNew = tableChangeData[index].warningList.indexOf('map') >= 0;
            result.push(
              <div key="map">
                <Checkbox
                  checked={map.status == 1 ? true : mapNew}
                  disabled={map.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('warningList', e.target.checked, 'map', index);
                  }}
                >
                  地图
                </Checkbox>
              </div>,
            );
          }
          const more = text.find((item) => item.scene === 'more');
          if (more) {
            const moreNew = tableChangeData[index].warningList.indexOf('more') >= 0;
            result.push(
              <div key="more">
                <Checkbox
                  checked={more.status == 1 ? true : moreNew}
                  disabled={more.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('warningList', e.target.checked, 'more', index);
                  }}
                >
                  更多筛选
                </Checkbox>
              </div>,
            );
          }
          return result.map((item) => {
            return item;
          });
        },
      },
      {
        title: '逾期车辆',
        width: '110px',
        dataIndex: 'overdueList',
        render: (text, record, index) => {
          const result = [];
          const checkStatus = tableChangeData[index].checkStatus === 0;
          const list = text.find((item) => item.scene === 'list');
          if (list) {
            const listNew = tableChangeData[index].overdueList.indexOf('list') >= 0;
            result.push(
              <div key="list">
                <Checkbox
                  checked={list.status == 1 ? true : listNew}
                  disabled={list.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('overdueList', e.target.checked, 'list', index);
                  }}
                >
                  列表
                </Checkbox>
              </div>,
            );
          }
          const detail = text.find((item) => item.scene === 'detail');
          if (detail) {
            const detailNew = tableChangeData[index].overdueList.indexOf('detail') >= 0;
            result.push(
              <div key="detail">
                <Checkbox
                  checked={detail.status == 1 ? true : detailNew}
                  disabled={detail.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('overdueList', e.target.checked, 'detail', index);
                  }}
                >
                  详情
                </Checkbox>
              </div>,
            );
          }
          const map = text.find((item) => item.scene === 'map');
          if (map) {
            const mapNew = tableChangeData[index].overdueList.indexOf('map') >= 0;
            result.push(
              <div key="map">
                <Checkbox
                  checked={map.status == 1 ? true : mapNew}
                  disabled={map.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('overdueList', e.target.checked, 'map', index);
                  }}
                >
                  地图
                </Checkbox>
              </div>,
            );
          }
          const more = text.find((item) => item.scene === 'more');
          if (more) {
            const moreNew = tableChangeData[index].overdueList.indexOf('more') >= 0;
            result.push(
              <div key="more">
                <Checkbox
                  checked={more.status == 1 ? true : moreNew}
                  disabled={more.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('overdueList', e.target.checked, 'more', index);
                  }}
                >
                  更多筛选
                </Checkbox>
              </div>,
            );
          }
          return result.map((item) => {
            return item;
          });
        },
      },
      {
        title: '行驶里程',
        width: '110px',
        dataIndex: 'mileageList',
        render: (text, record, index) => {
          const result = [];
          const checkStatus = tableChangeData[index].checkStatus === 0;
          const list = text.find((item) => item.scene === 'list');
          if (list) {
            const listNew = tableChangeData[index].mileageList.indexOf('list') >= 0;
            result.push(
              <div key="list">
                <Checkbox
                  checked={list.status == 1 ? true : listNew}
                  disabled={list.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('mileageList', e.target.checked, 'list', index);
                  }}
                >
                  列表
                </Checkbox>
              </div>,
            );
          }
          const more = text.find((item) => item.scene === 'more');
          if (more) {
            const moreNew = tableChangeData[index].mileageList.indexOf('more') >= 0;
            result.push(
              <div key="more">
                <Checkbox
                  checked={more.status == 1 ? true : moreNew}
                  disabled={more.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck('mileageList', e.target.checked, 'more', index);
                  }}
                >
                  更多筛选
                </Checkbox>
              </div>,
            );
          }
          return result.map((item) => {
            return item;
          });
        },
      },
      {
        title: '风控异常车辆',
        width: '110px',
        dataIndex: 'riskcontrolvehicleList',
        render: (text, record, index) => {
          const result = [];
          const checkStatus = tableChangeData[index].checkStatus === 0;
          const list = text.find((item) => item.scene === 'list');
          if (list) {
            const listNew = tableChangeData[index].riskcontrolvehicleList.indexOf('list') >= 0;
            result.push(
              <div key="list">
                <Checkbox
                  checked={list.status == 1 ? true : listNew}
                  disabled={list.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck(
                      'riskcontrolvehicleList',
                      e.target.checked,
                      'list',
                      index,
                    );
                  }}
                >
                  列表
                </Checkbox>
              </div>,
            );
          }
          const detail = text.find((item) => item.scene === 'detail');
          if (detail) {
            const detailNew = tableChangeData[index].riskcontrolvehicleList.indexOf('detail') >= 0;
            result.push(
              <div key="detail">
                <Checkbox
                  checked={detail.status == 1 ? true : detailNew}
                  disabled={detail.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck(
                      'riskcontrolvehicleList',
                      e.target.checked,
                      'detail',
                      index,
                    );
                  }}
                >
                  详情
                </Checkbox>
              </div>,
            );
          }
          const more = text.find((item) => item.scene === 'more');
          if (more) {
            const moreNew = tableChangeData[index].riskcontrolvehicleList.indexOf('more') >= 0;
            result.push(
              <div key="more">
                <Checkbox
                  checked={more.status == 1 ? true : moreNew}
                  disabled={more.status == 1 ? true : checkStatus}
                  // disabled={checkStatus}
                  onChange={(e) => {
                    this.handleChangeCheck(
                      'riskcontrolvehicleList',
                      e.target.checked,
                      'more',
                      index,
                    );
                  }}
                >
                  更多筛选
                </Checkbox>
              </div>,
            );
          }
          return result.map((item) => {
            return item;
          });
        },
      },
    ];

    const tableProps = {
      columns,
      size: 'middle',
      rowKey: 'sid',
      // scroll: { y: 480 },
      loading: tableLoading,
      dataSource: tableData,
      pagination: false,
    };
    return (
      <Modal
        title="字段同步"
        onCancel={() => changeSyncFieldModalVisible(false)}
        visible={true}
        width={1000}
        footer={[
          <Button
            key="back"
            type="ghost"
            size="small"
            onClick={() => changeSyncFieldModalVisible(false)}
          >
            取消
          </Button>,
          <Button
            loading={submitBtnLoading}
            size="small"
            key="submit"
            type="primary"
            loading={submitBtnLoading}
            onClick={() => this.handleSubmit()}
          >
            提交
          </Button>,
        ]}
      >
        <div className={styles.syncFieldModal}>
          <div className={styles.table}>
            <Table {...tableProps} />
          </div>
        </div>
      </Modal>
    );
  }
}
